<template>
  <div class="manage">
    <el-dialog
        title="新增隐患类型"
        :visible.sync="dialogVisible"
        width="30%"
        :destroy-on-close="true"
        style="text-align: center"
        :before-close="handleClose"
    >
      <!--用户的表单信息-->
      <el-form ref="form" :rules="rules" :inline="true" :model="form" label-width="80px" label-position="right">
        <el-form-item label="隐患类型" prop="type">
          <el-input placeholder="请输入隐患类型" v-model="form.type"></el-input>
        </el-form-item>
        <el-form-item label="隐患领域" prop="area">
          <el-input placeholder="请输入隐患领域" v-model="form.area"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
              <el-button @click="cancel">取 消</el-button>
              <el-button type="primary" @click="submit">确 定</el-button>
          </span>
    </el-dialog>
    <div class="manage-header">
      <el-button @click="handleAdd" type="primary" size="mini">
        + 新增
      </el-button>
      <!--          form搜索区域-->
      <el-form :inline="true" :model="userForm" size="mini">
        <el-form-item label="状态：" prop="status">
          <el-select v-model="userForm.status" placeholder="请选择隐患类型">
            <el-option
                v-for="item in statusLists"
                :key="item.label"
                :label="item.label"
                :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="隐患类型：" prop="type">
          <el-select v-model="userForm.type" placeholder="请选择隐患类型">
            <el-option label="全部类型" value=""></el-option>
            <el-option
                v-for="item in typelists"
                :key="item"
                :label="item"
                :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="onSubmit" size="mini">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="common-table">
      <el-table
          stripe
          height="90%"
          border
          size="mini"
          :data="tableData"
          style="width: 100%">
        <el-table-column
            fixed
            prop="id"
            label="隐患领域编号"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="type"
            label="隐患类型"
            align="center"
        >
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="mini" effect="dark" :type="(scope.row.type==='危险作业'?'danger':(scope.row.type==='消防安全'?'warning':''))">{{ scope.row.type }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="area"
            label="隐患领域"
            align="center"
            width="500px"
        >
        </el-table-column>
        <el-table-column
            prop="status"
            label="状态"
            align="center"
        >
          <template slot-scope="scope">
            <span :style="{ color: scope.row.status ===true ? 'green' :'red'}"
            >
              {{scope.row.status===true?'启用':'禁用'}}
            </span>
          </template>
        </el-table-column>
        <el-table-column
            label="操作"
            align="center"
            fixed="right"
        >
          <template slot-scope="scope">
            <el-button type="info"
                       icon="el-icon-s-tools"
                       size="mini"
                       :style="{background: scope.row.status ===true ? 'red' :'green'}"
                       @click="handleDelete(scope.row.id)">
              {{scope.row.status===true?'禁用':'启用'}}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pager">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="paginations.current"
            :page-sizes="[5 ,10, 20, 50, 100]"
            :page-size="paginations.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="paginations.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {dangerType,dangerArea,dangerTypeAdd,dangerTypeChange} from '@/api/dangertypes'
export default {
  name: "BusinessManagement",
  data(){
    return{
      dialogVisible: false,
      statusLists:[
        {
          label:'有效',
          value:1
        },
        {
          label:'无效',
          value: 0
        },
        {
          label:'全部',
          value: ''
        }
      ],
      form: {
        type: '',
        area: ''
      },
      rules: {
        type: [
          {
            required: true,
            message: '请输入隐患类型'
          }
        ],
        area: [
          {
            required: true,
            message: '请输入隐患领域'
          }
        ]
      },
      typelists:[],
      tableData: [],
      paginations: {
        current: 1, //当前页
        pageSize: 10, //一页显示多少条
        total: 0 //数据总数
      },
      userForm: {
        status: '',
        type:''
      }
    }
  },
  mounted() {
    this.created();
  },
  methods: {
    created() {
      let _this = this;
      dangerType({}).then(resp=>{
        if(resp.code===1){
          // let all='全部类型'
          // console.log(resp.data)
          // resp.data.unshift(all)
          _this.typelists=resp.data
          console.log(_this.typelists)
        }
      })
      this.getList()
    },
    //提交用户表单
    submit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          //后续对表单数据的处理
            dangerTypeAdd(this.form).then((res)=>{
              //新增用户的接口
              if(res.code===1){
                console.log('新增成功')
                this.$message.success({
                  message:res.message,
                  type:'success'
                })
                this.created();
              }else{
                console.log(res.message)
                this.$message.error(res.message)
                this.created();
              }
            })
          console.log(this.form, 'form')
          //清空表单数据
          this.$refs.form.resetFields()
          this.form.type = ''
          this.form.area = ''
          //关闭弹窗
          this.dialogVisible = false
        }
      })
    },
    //弹窗关闭的时候
    handleClose () {
      this.$refs.form.resetFields()
      this.form.type = ''
      this.form.area = ''
      this.dialogVisible = false
    },
    cancel () {
      this.handleClose()
    },
    handleDelete (id) {
        dangerTypeChange({danger_id:id}).then(res=>{
          if(res.code===1){
            this.$message.success(res.message)
            this.getList()
          }
        })
    },
    //分页方法
    handleCurrentChange(val) {
      this.paginations.current = val
      this.getList();
    },
    handleSizeChange(val) {
      this.paginations.pageSize = val
      this.getList();
    },
    //获取的列表数据
    getList () {
      //获取的列表数据
      if(this.userForm.status!==''){
        let params = {
          type:this.userForm.type,
          area:'',
          status:this.userForm.status,
          page_number:this.paginations.current,
          page_size:this.paginations.pageSize
        }
        dangerArea(params).then(resp => {
          if (resp.code === 1) {
            console.log(resp.data)
            this.tableData = resp.data
            this.paginations.total = resp.total_count
          }
        })
      }else{
        let params = {
          type:this.userForm.type,
          area:'',
          page_number:this.paginations.current,
          page_size:this.paginations.pageSize
        }
        dangerArea(params).then(resp => {
          if (resp.code === 1) {
            console.log(resp.data)
            this.tableData = resp.data
            this.paginations.total = resp.total_count
          }
        })
      }

    },
    handleAdd () {
      this.dialogVisible = true
    },
    //列表的查询
    onSubmit () {
      this.getList()
    },
  }
}
</script>

<style lang="less" scoped>
.manage{
  height: 100%;
  .manage-header{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px dotted lightgrey;
  }
  .common-table{
    margin-top: 20px;
    position: relative;
    height: 90%;
    .pager{
      position: absolute;
      bottom: 0;
      right: 20px;
    }
  }
}
</style>
